/* 1. 定义全局辉光和玻璃效果的 CSS 变量 */
:root {
  --glow-color-primary: rgba(136, 100, 221, 0.7);  /* 紫色辉光 (来自您的新主题色) */
  --glow-color-secondary: rgba(0, 198, 255, 0.6);   /* 霓虹蓝辉光 */
  --glass-border-color: rgba(255, 255, 255, 0.1);
  --glass-background-color: rgba(41, 42, 45, 0.6); /* 半透明的深色背景 (来自您的 surface 色) */
}

/* 2. 为 body 设置一个深邃的渐变背景，增加氛围感 */
body {
  background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%) !important;
}

/* 3. “玻璃拟态”卡片核心样式 */
.glass-card {
  background: var(--glass-background-color) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--glass-border-color) !important;
  transition: all 0.3s ease;
}

/* 4. 卡片的悬停“辉光”效果 */
.glass-card-glow:hover {
  border-color: var(--glow-color-primary);
  box-shadow: 0 0 15px var(--glow-color-primary), 0 0 25px var(--glow-color-secondary);
  transform: translateY(-6px);
}

/* 5. 渐变文字效果，用于标题 */
.gradient-text {
  background: linear-gradient(45deg, #8864DD, #00C6FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

/* 6. 渐变按钮样式 */
.gradient-button {
  background: linear-gradient(45deg, #8864DD, #5A34B3) !important;
  transition: all 0.3s ease !important;
}
.gradient-button:hover {
  box-shadow: 0 0 20px var(--glow-color-primary);
  transform: scale(1.05);
}

/* 7. 美化滚动条，提升细节感 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #1F2023;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(#8864DD, #00C6FF);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #fff;
}